import { createContext, Fragment, useEffect, useRef, useState } from "react";
import CrntButton from "./CrntButton";
import './hook.less';

// 自定义Hook，订阅传进来的参数的变化，并返回最新的内容
function useOrderStatus(order:any) {
  const [status, setStatus] = useState(null)
  useEffect(() => {
    setStatus(order.status)
  })
  return status;
}

import { colorDB } from "./color.data";

// 上下文传递数据
export const ThemeContext = createContext({})


const colorUIList:Array<Array<any>> = [];
for (let key in colorDB) {
  colorUIList.push(colorDB[key])
}

function hook() {

  const [theme, setTheme] = useState({
    color: '#fff', 
    backgroundColor: '#00a6ed',
    fontWeight: 'bold',
  })

  const [order, setOrder] = useState({
    id: 'ia48a82buseu1nqi1', product: '礼盒', price: '80', time: '2020-01-02 23:23:10', status: 'success'
  })

  const orderStatus = useOrderStatus(order);

  const color = useRef<any>({
    current: {
      value: '#fff'
    }
  });
  const backgroundColor = useRef<any>({
    current: {
      value: '#fff'
    }
  })

  const [colorList, setColorList] = useState([
    {left: '#f00', right: '#00f'},
    {left: '#f00', right: '#0f0'},
    {left: '#0f0', right: '#00f'},
    {left: '#f00', right: '#00f'},
    {left: '#f00', right: '#00f'},

  ])

  const mergeColor = (col1:string, col2:string):string => {
    let num1 = Number(`0x${col1.slice(1)}`)
    let num2 = Number(`0x${col2.slice(1)}`)
    let ret = num1 + num2;
    
    let color = `#${ret.toString(16).slice(2)}`

    while (color.length < 7) {
      color = `${color}0`
    }
    return color;
  };

  return (
    <div className="p-hook">
      <div>
        <h1>Hook</h1>
      </div>
      <div>
        <div>
          <span>{order.product}: ￥{order.price}__{order.time}__{orderStatus}</span>
        </div>
      </div>
      <div>
        <div>
          <div>
            <span>字体颜色：</span>
            <input type="color" ref={color} onChange={() => {console.log('color: ', color, color?.current?.value); setTheme({...theme, color: color.current.value})}}/>
          </div>
          <div>
            <span>背景颜色：</span>
            <input type="color" ref={backgroundColor} onChange={() => {console.log('color: ', color, color?.current?.value); setTheme({...theme, backgroundColor: backgroundColor.current.value})}}/>
          </div>
        </div>
        <ThemeContext.Provider value={theme}>
          <CrntButton>button</CrntButton>
        </ThemeContext.Provider>
      </div>
      <div>
        <div>颜色控制</div>
        <div className="color-grid">
          {
            colorList.map((item, idx) => {

              return (
                <div key={idx} className="color-row">
                  <div style={{backgroundColor: item.left}}></div>
                  <div style={{backgroundColor: item.right}}></div>
                  <div style={{backgroundColor: mergeColor(item.left, item.right)}}></div>
                </div>
              )
            })
          }
        </div>
      </div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  )
}

export default hook;